import React from 'react'

const Info = () => {

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 获取文章id
    const [searchParams] = React.$Router.useSearchParams()
    const [id, setId] = React.useState(searchParams.get('id'))

    // 获取登录信息
    let Login = React.$Cookies.load('LoginAuth') ? React.$Cookies.load('LoginAuth') : {}
    const [LoginAuth, setLoginAuth] = React.useState(Login)

    // 收藏状态
    const [collection, setCollection] = React.useState(false)

    // 上一篇和下一篇
    const [prev, setPrev] = React.useState({})
    const [next, setNext] = React.useState({})

    // 收藏以及取消收藏的方法
    const onConfirm = async () => {
        const data = {
            busid: Login.id,
            cateid: parseInt(id)
        }
        const result = await React.$Api.CateCollection(data)

        if (result.code === 0) {
            React.$Vant.Toast.fail('操作失败')
        }

        // if (result.code === 1 ) {
        if (result.data.status === true) {
            setCollection(true)
            React.$Vant.Toast.success('收藏成功')
        } else {
            setCollection(false)
            React.$Vant.Toast.success('取消收藏成功')
        }
        // }
    }

    // 上一篇按钮
    const PrevCate = () => {
        let toPrev = () => {
            setId(prev.id)
            navigate('/category/category/info?id=' + prev.id)
            navigate(0)
        }

        if (prev) {
            return (
                <p>上一篇：<a onClick={toPrev}>{prev.name}</a></p>
            )
        } else {
            return (
                <p>上一篇：已经到顶了</p>
            )
        }
    }

    // 下一篇
    const NextCate = () => {
        let toNext = () => {
            setId(next.id)
            navigate('/category/category/info?id=' + next.id)
            navigate(0)
        }

        if (next) {
            return (
                <p>下一篇：<a onClick={toNext}>{next.name}</a></p>
            )
        } else {
            return (
                <p>下一篇：已经到顶了</p>
            )
        }
    }

    // 收藏按钮组件
    const Collection = () => {
        if (JSON.stringify(LoginAuth) !== '{}') {
            if (collection) {
                return (
                    <div className="niming_sq niming_sq_xs_xq" onClick={onConfirm}>
                        <a>
                            <React.$Icons.Star />已收藏
                        </a>
                    </div>
                )
            } else {
                return (
                    <>
                        <div className="niming_sq niming_sq_xs_xq" onClick={onConfirm}>
                            <a>
                                <React.$Icons.StarO />收藏
                            </a>
                        </div>
                    </>
                )
            }
        }
    }

    // 文章详情
    const [info, setInfo] = React.useState({})

    // 请求数据
    const getInfoData = async () => {
        let data = {
            id: id,
            busid: LoginAuth.id
        }

        let result = await React.$Api.CateInfo(data)
        // console.log(result);
        if (result.code === 1) {
            setInfo(result.data.info)
            setCollection(result.data.Collection)
            setPrev(result.data.prev)
            setNext(result.data.next)
        } else {
            React.$Vant.Toast({
                type: 'fail',
                message: result.msg,
                onClose: () => {
                    navigate(-1)
                }
            })
        }
    }

    React.useEffect(() => {
        getInfoData()
    }, [])

    const onBack = () => {
        navigate('/category/category/index')
    }
    return (
        <>
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='学术详情'
                    leftText='返回'
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="xs_Xiangq">
                <div className="bt">
                    <h2>{info.name}</h2>
                    <div className="text">
                        <span>{info.createtime_text}</span>
                        <span>文章分类：{info.type}</span>
                    </div>
                </div>
                <div className="wom_de" dangerouslySetInnerHTML={{ __html: info.description }}></div>

                <Collection />
            </div>

            <div className="rem2"></div>
            <div className="shangxia_piab">
                <PrevCate />
                <NextCate />
            </div>
        </>
    )
}

export default Info